﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>关联半成品</title>
	<link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
	<link rel="stylesheet" href="${ctx}/common/common.css">
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
    
    <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
    <script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
	<style type="text/css">
		.container{
			padding: 40px 20px;
			background: #fff;
			margin:20px 0;
		}
		.container ul.data-list{width: 40%;border: 1px solid #e5e5e5;}
		.container ul.data-list li{line-height: 32px;padding: 0px 10px;width: 360px;overflow: hidden;height: 30px;}
		.container ul.data-list li:hover{ background-color: rgba(0, 150, 136, 0.73); color: #fff; cursor: pointer; font-weight: bold;transition: 0.4s; }
		.container ul.data-list li.selected{ background-color: #009688; color: #fff; }
		.container ul.data-list li.selectedDel{ background-color: #009688; color: #fff; }
		.button-box{
			width: 20%;
			display: flex;
    		justify-content: space-between;
    		padding: 20px;
			gap:5px;
		}
		.container-ul{
			display:flex;
		}
		.tianjia{
			width:80px;
		    height: 38px;
			padding: 0 18px;
			background-color: #009688;
			color: #fff;
			border: none;
			cursor: pointer;
		}
		
		.tianjia:hover{
			opacity: .8;
		}
		.shanchu{
			width:80px;
			height: 38px;
			padding: 0 18px;
			background-color: #FF5722;
			color: #fff;
			border: none;
			cursor: pointer;
		}
		.shanchu:hover{
			opacity: .8;
		}
		.data-list span{
			margin-left: 5px;
		}
		.fanhui{
			width:80px;
			height: 38px;
			padding: 0 18px;
			background-color: #ffffff;
		    color: #000;
			cursor: pointer;
			border: 1px solid #e5e5e5;
		}
		.fanhui:hover{
			opacity: .8;
		}
		.layui-col-space12{
			display: flex;
    		padding: 20px 0;
		}
		.layui-col-md5{
			margin-left: 15%;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="layui-row layui-col-space12">
		    <div class="layui-col-md7">
		      <h5>未添加半成品</h5>
		    </div>
		    <div class="layui-col-md5">
		      <h5>已添加半成品</h5>
		    </div>
		</div>
		<div class="container-ul">
			<ul class="data-list" id="lList">
				<c:forEach items="${otherSermigoodList}" var="osl">
				<li>${osl.name}<span>${osl.classify_name}</span>
				<input type="hidden" value="${osl.id}" class="selectSermigood">
				</li>
			</c:forEach>
			</ul>
			<div class="button-box">
				<button type="button" name="button" id="add" class="tianjia">添 加</button>
				<button type="button" name="button" id="remove" class="shanchu">删 除</button>
				<button type="button" id="rollback" class="fanhui">返回</button>
			</div>
			<ul class="data-list" id="rList">	
				<c:forEach items="${mySermigoodList}" var="msl">
					<li>${msl.name}<span>${msl.classify_name}</span>
					<input type="hidden" value="${msl.id}" class="selectSermigood">
					</li>
				</c:forEach>
			</ul>
		</div>
	</div>
	  <!--  <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" id="rollback" class="layui-btn layui-btn-primary">返回</button>
        </div>
    </div>-->
	<script type="text/javascript">
	$(function(){
		var lList = $("#lList");
		var llList = document.getElementById("lList");
		var rList = $("#rList");
		var items = $(".data-list li"); 	
		for(var i = 0;i<items.length;i++){
			items[i].onclick = itemsclick;
			items[i].ondblclick = itemsdblclick;
		}
		function itemsdblclick(){
			var ids = new Array();
			var id = $(this).find("input").val();
			ids.push(id);
			var obj = this
			if (this.parentNode == llList) {
				$.ajax({
                    url: "${ctx}/products/addProductSermigood",
                    data: {segoodIds:ids.toString(),prodId:${proId}}, //请求的附加参数，用json对象
                    method: 'POST',
                    async:false,
                    success: function (data) {
                        if (data == '1') {
                        	obj.className="selectedDel";
       						rList.append(obj);
                        }else{
                        	layer.alert("移动失败");
                        }
                    }
                });
			}else{
				$.ajax({
                    url: "${ctx}/products/delProductSermigood",
                    data: {segoodIds:ids.toString(),prodId:${proId}}, //请求的附加参数，用json对象
                    method: 'POST',
                    async:false,
                    success: function (data) {
                        if (data == '1') {
                        	obj.className="selected";
       						lList.append(obj);
                        }else{
                        	layer.alert("移动失败");
                        }
                    }
                });
			}
		}
		function itemsclick(){
			var classname = this.className;
			if(classname == "selected" || classname == "selectedDel"){
				this.className = "";
			}else{
				if($(this).parent().attr("id") == 'lList'){
					this.className="selected";
				}else{
					this.className="selectedDel";
				}
			}
		}
		function itemsMove(){
			if(this.id === "add"){
				var ids = new Array();
				var items = $(".data-list li.selected");
				for(var i = 0;i<items.length;i++){
					var id = $(items[i]).find("input").val();
					ids.push(id);
				}
				$.ajax({
                    url: "${ctx}/products/addProductSermigood",
                    data: {segoodIds:ids.toString(),prodId:${proId}}, //请求的附加参数，用json对象
                    method: 'POST',
                    async:false,
                    success: function (data) {
                        if (data == '1') {
                        	for(var i = 0;i<items.length;i++){
                        		items[i].className="";
       						    items[i].className="selectedDel";
           						rList.append(items[i]);
          					}
                        }else{
                        	layer.alert("移动失败");
                        }
                    }
                });
			}else{
				var ids = new Array();
				var items = $(".data-list li.selectedDel");
				for(var i = 0;i<items.length;i++){
					var id = $(items[i]).find("input").val();
					ids.push(id);
				}
				$.ajax({
                    url: "${ctx}/products/delProductSermigood",
                    data: {segoodIds:ids.toString(),prodId:${proId}}, //请求的附加参数，用json对象
                    method: 'POST',
                    async:false,
                    success: function (data) {
                        if (data == '1') {
                        	for(var i = 0;i<items.length;i++){
                        		items[i].className="";
       						    items[i].className="selected";
                        		lList.append(items[i]);
          					}
                        }else{
                        	layer.alert("移动失败");
                        }
                    }
                });
			}
		}
		$("#add").on("click",itemsMove);
		$("#remove").on("click",itemsMove);
	});
	document.getElementById("rollback").addEventListener("click",function(){
        window.history.back();
    })
	</script>
</body>
</html>



